<template>
    <div id="dataDetail">
        <div class="dataDetail_content">
            <h3 class="dataDetail_title">文章标题</h3>
            <div class="detailBox">
                <ul class="detailBox_ul">
                    <li>2019-12-12 09:09:00</li>
                    <li>来源：新浪微博</li>
                    <li>作者：胡一天</li>
                    <li>情感：正面</li>
                    <li>首发网站：未知网站</li>
                    <li>相关舆情数：2</li>
                    <li>涉及关键词：
                        <span>高考</span>
                        <span>上班</span>
                        <span>股票</span>
                    </li>
                </ul>
                <el-button class="newsLinkBtn" size="mini" icon="link">原文链接</el-button>
                 <div class="newsRelevant">
                    <span class="newsBtn news_warn">预警</span>
                    <span class="newsBtn news_copy">复制文章</span>
                    <span class="newsBtn news_collect">收藏</span>
                </div>
                <h3 class="dataDetail_title">正文</h3>
                 <div class="dataDetail_news">
                    c*投诉荆州发布【考生徒步看考场未带雨具 民警暖心披雨衣护送】6日下午，@荆州交警一大队 民警在荆州中学考点管制区路口处，发现一考生徒步看考场未带雨具，值守民警担心考生淋雨影响明日考试，脱下警用雨衣为考生批上，后用警车将考生护送到校，排队看考场。蜀黍温馨提醒：明后两天高考遇雨，家长要提前规划好出行路 展开全文c【考生徒步看考场未带雨具 民警暖心披雨衣护送】6日下午，@荆州交警一大队 民警在荆州中学考点管制区路口处，发现一考生徒步看考场未带雨具，值守民警担心考生淋雨影响明日考试，脱下警用雨衣为考生批上，后用警车将考生护送到校，排队看考场。蜀黍温馨提醒：明后两天高考遇雨，家长要提前规划好出行路线！ L湖北荆州交警的微博视频 收起全文d
                </div>
            </div>
           <div class="detailChart">
               <h3 class="dataDetail_title">词云</h3>
               <!-- <el-radio-group v-model="wordCloud" size="small" @change="refreshCloud">
                    <el-radio label="1" border>通用</el-radio>
                    <el-radio label="2" border>地域</el-radio>
                    <el-radio label="3" border>人物</el-radio>
                    <el-radio label="4" border>机构</el-radio>
                </el-radio-group> -->
                <div class="cloudBox" id="cloud"></div>
                <el-divider></el-divider>
               <h3 class="dataDetail_title yuqing">相关舆情</h3>
               <h4>文章标题，我是文章标题</h4><br>
               <span class="dataDetailSpan">2019-09-09 09：09：00</span><br>
               <span class="dataDetailSpan">来源：新浪微博</span>
           </div>
            
        </div>
    </div>
</template>
<script>
import '../../assets/css/dataDetail.css'
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
    data(){
        return{
            wordCloud: '1'
        }
    },
    mounted(){
        this.cloudChart = this.$echarts.init(document.getElementById("cloud"));
        setTimeout( () => {
            this.drawCloud()
        }, 500)
    },
    created(){
        
    },
    methods:{
        drawCloud(){
            var data = {
                value: [{
                    "name": "荆州",
                    "value": 1446
                    },
                    {
                        "name": "两天",
                        "value": 928
                    },
                    {
                        "name": "6日",
                        "value": 874
                    },
                    {
                        "name": "中学",
                        "value": 90
                    }
                ],
                image: ""
            }
            //温馨提示：image 选取有严格要求不可过大；，否则firefox不兼容 iconfont上面的图标可以
            var maskImage = new Image();
            maskImage.src = data.image
    
            var option = {
                backgroundColor:'rgba(255,255,255,0)',
                tooltip: {
                    show: false
                },
                toolbox: {
                    top: -5,
                    right: 10,
                    feature: {
                        saveAsImage: {
                            title: ' '
                        }
                    }
                },
                grid:{
                    top: 110,
                    bottom: 0
                },
                series: [{
                    type: 'wordCloud',
                    gridSize: 1,
                    sizeRange: [12, 55],
                    rotationRange: [-45, 0, 45, 90],
                    maskImage: maskImage,
                    textStyle: {
                        normal: {
                            color: function() {
                            return 'rgb(' +
                                Math.round(Math.random() * 255) +
                                ', ' + Math.round(Math.random() * 255) +
                                ', ' + Math.round(Math.random() * 255) + ')'
                            }
                        }
                    },
                    left: 'center',
                    top: 'center',
                    width: '96%',
                    right: null,
                    bottom: null,
                    data: data.value
                }]
            }
            this.cloudChart.setOption(option);
        },
        refreshCloud(){
            var cloudOption = this.cloudChart.getOption();
            console.log(cloudOption)
            let data = [];
            if(this.wordCloud == '1'){
                data = [{
                    "name": "荆州",
                    "value": 1446
                    },
                    {
                        "name": "两天",
                        "value": 928
                    },
                    {
                        "name": "6日",
                        "value": 874
                    },
                    {
                        "name": "中学",
                        "value": 90
                    }
                ]
            }else if(this.wordCloud == '2'){
                data=[
                    {"name": "荆州",
                    "value": 1446}
                ]
            }else if(this.wordCloud == '3'){
                data = [
                    {
                        "name": "两天",
                        "value": 928
                    },
                    {
                        "name": "6日",
                        "value": 874
                    }
                ]
            }else if(this.wordCloud == '4'){
                data = []
            }
            cloudOption.series[0].data = data;
            // this.cloudChart.clear();
            
            this.cloudChart.setOption(cloudOption, true);
            // this.cloudChart.refresh();
        }
    }
}
</script>